<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <style>
        .share_bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.0);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100000
        }

        .share_mode {
            width: 100%;
            height: auto;
            overflow: hidden;
            background: #ededed;
            position: fixed;
            left: 0px;
            bottom: 0px;
            border-radius: 10px 10px 0 0
        }

        .colse_btn {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: relative;
            color: #323232;
            font-size: 14px;
        }

        .colse_btn:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background: #e6e6e6;
            right: 0;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .share_title {
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #323232;
            position: relative;
            font-size: 14px;
        }

        .share_title:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: #e6e6e6;
            right: 0;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .share_content {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .share_content p {
            color: #ff2526;
            font-size: 12px;
            width: 90%;
            margin: 10px auto;
            line-height: 20px;
        }

        .share_modes {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 15px;
        }

        .share_info {
            width: 33.33%;
            float: left;
            text-align: center;
            margin-bottom: 15px;
            height: 80px;
            overflow: hidden;
        }

        .share_info img {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }

        .share_info text {
            display: block;
            color: #808080;
            font-size: 13px;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="share_bg" style="display:none">
        <div class="share_mode">
            <div class="share_title">
                分享方式
            </div>
            <div class="share_content">
                <p>
                    *注:由于新版微信调整了分享策略，如果遇到多图无法分享至朋友圈，请先保存图片再打开微信分享。
                </p>
                <div class="share_modes">

                    <div class="share_info saveimg">
                        <img src="../image/save_01.png">
                        <text>
              保存图片
            </text>
                    </div>
                    <div class="share_info copywenan">
                        <img src="../image/save_02.png">
                        <text>
            复制文案
            </text>
                    </div>
                    <div class="share_info wxshare">
                        <img src="../image/save_03.png">
                        <text>
              微信
            </text>
                    </div>
                    <div class="share_info friendsshare">
                        <img src="../image/save_04.png">
                        <text>
            朋友圈
            </text>
                    </div>
                    <div class="share_info kongjianshare">
                        <img src="../image/save_05.png">
                        <text>
            QQ空间
            </text>
                    </div>
                    <div class="share_info qqshare">
                        <img src="../image/save_06.png">
                        <text class="copybtn">
              QQ
            </text>
                    </div>
                </div>
            </div>
            <div class="colse_btn">
                取消分享
            </div>
        </div>
    </div>
    <section class="aui-content">
        <div class="aui-content aui-flex-row aui-margin-5" id="div_goods_list">
        </div>
        <!--加载loading-->
        <div class="index_loading">
            <img src="../image/index_loading.gif" />
            <span>加载中,请稍后...</span>
        </div>
        <div class="temporarily_data" style="display:none;">
            <img src="../image/no_date.png" />
        </div>
        <!--返回顶部-->
        <div class="gotoback" onclick="gotoback()" id="gotoback" style="z-index:999999">
            <img src="../image/gotoback.png">
        </div>
    </section>
    <canvas id="sharecanvas" style="background-color:white; width:80%;display: none;" class="am-text-center am-center"></canvas>
    <script id="tmpl_goods_list" type="text/x-dot-template">
        {{~it:vo:index}}
        <div class="aui-flex-item-12 aui-flex-col aui-flex-top">
            <div class="aui-flex-item-1"><img src="{{=$api.getStorage('appSetInfo').app_logo}}" class="aui-img-round" /></div>
            <div class="aui-flex-item-11 aui-flex-row">
                <div class="aui-flex-12 aui-ellipsis-1 ">{{=vo.goods_short_name}}</div>
                <div class="aui-flex-item-12 aui-font-size-14">{{=vo.goods_desc}}</div>
                <div class="aui-flex-12 aui-flex-col aui-flex-bottom ">
                    {{?vo.picurls}} {{~vo.picurls.toString().split(','):img:index_}}
                    <div class="aui-flex-item-4 aui-padded-5" tapmode onclick="CanvasImg.openBrowserImg({{!JSON.stringify(vo.picurls.toString().split(','))}},{{=index_}})">
                        <img data-echo="{{=img}}" src="../image/load-img.png" class="aui-border-radius" width="100px" height="100px" onerror="this.src='../image/load-img.png'" />
                    </div>
                    {{~}} {{?}}
                </div>
                <footer id="aui-footer" class="aui-flex-12 aui-flex-col aui-border-radius aui-margin-5 aui-flex-middle aui-flex-center" style="box-shadow:0 0 5px #ddd;margin-top:-2rem;z-index:9999">
                    <div class="aui-flex-item-3">
                        <div class="aui-padded-5">
                            <img src="{{=vo.picurl}}" class="aui-border-radius" width="80px" height="80px" />
                        </div>
                    </div>
                    <div class="aui-flex-item-6 aui-flex-row aui-flex-bottom">
                        <div class="aui-ellipsis-1 aui-font-size-12">{{=vo.goods_short_name}}</div>
                        <div class="aui-flex-col aui-flex-middle aui-flex-center" style="height:45px">
                            <div class="aui-flex-item-6 aui-font-size-12 aui-text-danger aui-flex-middle" style="line-height:1rem;height:1rem">￥{{=vo.price_after}}</div>
                            <div class="aui-flex-item-6 aui-padded-r-0 aui-flex-middle aui-font-size-10  aui-quan aui-bg-tag-quan" style="line-height:0.8rem;height:0.8rem;"><i>券{{=(vo.discount * 1).toFixed(0)}}元</i></div>
                        </div>
                        <div class="aui-text-white aui-border-radius-bottom aui-text-center aui-font-size-12  aui-bg-tag-quan-{{? index%2==0}}0{{??}}1{{?}} ">{{? isLoginOr()==false}}预估赚{{= (vo.commission * 1).toFixed(2)}}元{{??}} 预估赚{{= (vo.commission * isLoginOr().yjrate * 0.01).toFixed(2)}}元{{?}}
                        </div>
                    </div>
                    <div class="aui-text-center  aui-flex-item-3 " style="height:70px;line-height:70px" tapmode onclick="doshare({{!JSON.stringify(vo)}})">
                        <div class="aui-margin-5 aui-border-radius {{? index%2==0}} aui-bg-tag-quan{{??}}aui-bg-tag-money{{?}}">立即分享</div>
                    </div>
                    <!--
          				<div class="aui-text-center  aui-flex-item-3 " style="height:70px;line-height:70px" tapmode onclick="openWinto('pdd_jd_detail_win','widget://html/good_pdd_jd_detail_win',{source_type:'tb',goods_id:{{=vo.itemid}},from:'collection',picurl:'{{=vo.itempic}}',picurls:'{{=vo.itemtitle}}',goods_name:'{{=vo.itemtitle}}',sales:'1000',price:'50',price_after:'10',discount:'2000'})">
          					<div class="aui-margin-5 aui-border-radius {{? index%2==0}} aui-bg-tag-quan{{??}}aui-bg-tag-money{{?}}">立即购买</div>
          				</div>
                  -->
                </footer>
            </div>

        </div>
        {{~}}
    </script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/canvasImg.js"></script>
<script type="text/javascript" src="../script/opensdk.js"></script>
<script type="text/javascript">
    var gooditem, appSetInfo, erweima_url, pageParam;
    var data = {};
    data.pageindex = 1;
    data.isloaded = true;
    apiready = function() {
        echo.init({
            offset: 0,
            throttle: 250,
            unload: false,
        });
        pageParam = api.pageParam;
        if (pageParam.data) {
            pageParam = pageParam.data;
        }
        Object.assign(sorts_data, api.pageParam);
        bodySrollChangeHeader();
        getGoodsList(sorts_data.source_type, sorts_data);
        pullDown(function() {
            sorts_data.isloaded = false;
            sorts_data.pageindex = 1;
            getGoodsList(pageParam.source_type, sorts_data);
        }, true)
        getMoreGoods(function() {
            getGoodsList(sorts_data.source_type, sorts_data, true);
        })
        $('.colse_btn').click(function() {
            $('.share_bg').hide();
        });
        $('.saveimg').click(function() {
            for (var i = 0, cat = gooditem.picurls.toString().split(','); i < cat.length; i++) {
                if (cat[i].lastIndexOf(".") == 'jpg' || cat[i].lastIndexOf(".") == 'png') {
                    downloadFile(cat[i], function(res) {
                        if (res && i == cat.length - 1) {
                            hideProgress();
                            showToast('保存成功!');
                        } else {
                            //showToast('下载失败!');
                        }
                    })
                }

            }
        });
        $('.wxshare').click(function() {
            copyWord('Tip:' + gooditem.goods_desc.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.wx.shareImage('session', gooditem.picurl, gooditem.picurl);
        });
        $('.qqshare').click(function() {
            copyWord('Tip:' + gooditem.goods_desc.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.qq.shareImage('QFriend', gooditem.picurl);
        });
        $('.kongjianshare').click(function() {
            copyWord('Tip:' + gooditem.goods_desc.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.qq.shareImage('QZone', gooditem.picurl);
        });
        $('.friendsshare').click(function() {
            copyWord('Tip:' + gooditem.goods_desc.replace(/<br\s*\/>/gi, "\n"), true);
            opensdk.wx.shareImage('tinimele', gooditem.picurl, gooditem.picurl);
        });
        $('.copywenan').click(function() {
            copyWord('Tip:' + gooditem.goods_desc.replace(/<br\s*\/>/gi, "\n"), true);
        });

    };



    function doshare(data) {
        gooditem = data;
        gooditem.source_type = pageParam.source_type;
        gooditem.commission = (gooditem.commission * isLoginOr().yjrate * 0.01).toFixed(2);
        getShareGoodsPic();
    }
    //生成分享图片
    function getShareGoodsPic() {
        var _user = isLogin();
        if (_user) {
            showProgress('图片生成中...');
            if (pageParam.source_type == 'jd') {
                getJdPddUrl({
                    goods_id: gooditem.goods_id,
                    couponurl: encodeURI(gooditem.couponurl),
                    type: 1
                }, function(ret) {
                    hideProgress();
                    if (ret.data) {
                        gooditem.s_click_url = ret.data;
                        openWinto('share_good_win', 'widget://html/coupon_head', {
                            name: '商品分享',
                            url: 'widget://html/jdpdd_share_good.html',
                            gooditem: gooditem
                        });
                    }
                })
            }
            if (pageParam.source_type == 'pdd') {
                getJdPddUrl({
                    goods_id: gooditem.goods_id,
                    apiname: 'pdd/getunionurl'
                }, function(ret) {
                    hideProgress();
                    if (ret.data.data) {
                        gooditem.s_click_url = ret.data.data;
                        openWinto('share_good_win', 'widget://html/coupon_head', {
                            name: '商品分享',
                            url: 'widget://html/jdpdd_share_good.html',
                            gooditem: gooditem
                        });
                    }
                })
            }


        }

    }
</script>

</html>
